<template>
  <div class="app-container">
    <el-card class="box-card detail-card" shadow="hover">
      <div slot="header" class="clearfix card-header">
        <div class="left-section">
          <i class="el-icon-document-checked header-icon"></i>
          <span class="card-title">住院电子病历详情</span>
          <el-tag
            :type="form.fileFlag === '1' ? 'success' : form.fileFlag === '0' ? 'warning' : form.fileFlag === '2' ? 'danger' : 'info'"
            effect="dark"
            class="status-indicator"
          >
            {{ form.fileFlag === '1' ? '成功' : form.fileFlag === '0' ? '等待' : form.fileFlag === '2' ? '失败' : '未知' }}
          </el-tag>
        </div>
        <el-button type="primary" size="mini" icon="el-icon-back" @click="handleBack" class="back-button">返回列表</el-button>
      </div>

      <div class="content-section">
        <!-- 基本信息部分 -->
        <div class="section-title">
          <i class="el-icon-info section-icon"></i>
          <span>基本信息</span>
        </div>
        <el-row>
          <el-col :span="24">
            <el-descriptions class="margin-top info-descriptions" :column="3" border>
              <el-descriptions-item label="病历ID" label-class-name="label-style" content-class-name="content-style">
                <span class="id-text">{{ form.mrCode || '暂无数据' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="住院病历记录编号" label-class-name="label-style" content-class-name="content-style">
                <span class="record-text">{{ form.inMrSn || '暂无数据' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="系统ID" label-class-name="label-style" content-class-name="content-style">
                {{ form.rowkey || '暂无数据' }}
              </el-descriptions-item>
              <el-descriptions-item label="患者编号" label-class-name="label-style" content-class-name="content-style">
                <span class="patient-text">{{ form.patientSn || '暂无数据' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="就诊编号" label-class-name="label-style" content-class-name="content-style">
                <span class="visit-text">{{ form.patVisitSn || '暂无数据' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="状态" label-class-name="label-style" content-class-name="content-style">
                <el-tag type="success" v-if="form.fileFlag === '1'" effect="dark" class="detail-tag">成功</el-tag>
                <el-tag type="warning" v-else-if="form.fileFlag === '0'" effect="dark" class="detail-tag">等待</el-tag>
                <el-tag type="danger" v-else-if="form.fileFlag === '2'" effect="dark" class="detail-tag">失败</el-tag>
                <el-tag type="info" v-else effect="dark" class="detail-tag">未知</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间" label-class-name="label-style" content-class-name="content-style">
                <span class="time-text">{{ form.createdT || '暂无数据' }}</span>
              </el-descriptions-item>
              <el-descriptions-item v-if="form.updatedT" label="最后更新时间" label-class-name="label-style" content-class-name="content-style">
                <span class="time-text">{{ form.updatedT }}</span>
              </el-descriptions-item>
              <el-descriptions-item v-if="form.stFileSta" label="病历状态描述" label-class-name="label-style" content-class-name="content-style">
                {{ form.stFileSta }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- 文书信息部分 -->
        <el-divider content-position="left">
          <div class="divider-content">
            <i class="el-icon-document section-icon"></i>
            <span>文书信息</span>
          </div>
        </el-divider>

        <el-row>
          <el-col :span="24">
            <el-descriptions class="margin-top detail-descriptions" :column="2" border>
              <el-descriptions-item v-if="form.mrName" label="病历文件名" label-class-name="label-style" content-class-name="content-style">{{ form.mrName }}</el-descriptions-item>
              <el-descriptions-item v-if="form.mrTopic" label="文书标题" label-class-name="label-style" content-class-name="content-style">{{ form.mrTopic }}</el-descriptions-item>
              <el-descriptions-item v-if="form.mrType" label="文书归类" label-class-name="label-style" content-class-name="content-style">{{ form.mrType }}</el-descriptions-item>
              <el-descriptions-item v-if="form.stMrType" label="文书归类描述" label-class-name="label-style" content-class-name="content-style">{{ form.stMrType }}</el-descriptions-item>
              <el-descriptions-item v-if="form.mrClass" label="模板大类" label-class-name="label-style" content-class-name="content-style">{{ form.mrClass }}</el-descriptions-item>
              <el-descriptions-item v-if="form.mrSubClass" label="模板小类" label-class-name="label-style" content-class-name="content-style">{{ form.mrSubClass }}</el-descriptions-item>
              <el-descriptions-item v-if="form.captionDateTime" label="病历标题时间" label-class-name="label-style" content-class-name="content-style">{{ form.captionDateTime }}</el-descriptions-item>
              <el-descriptions-item v-if="form.fileVisitType" label="病历属性" label-class-name="label-style" content-class-name="content-style">{{ form.fileVisitType }}</el-descriptions-item>
              <el-descriptions-item v-if="form.photocopy" label="复印状态" label-class-name="label-style" content-class-name="content-style">{{ form.photocopy }}</el-descriptions-item>
              <el-descriptions-item v-if="form.stPhotocopy" label="复印状态描述" label-class-name="label-style" content-class-name="content-style">{{ form.stPhotocopy }}</el-descriptions-item>
              <el-descriptions-item v-if="form.deleteFlag" label="删除标记" label-class-name="label-style" content-class-name="content-style">{{ form.deleteFlag }}</el-descriptions-item>
              <el-descriptions-item v-if="form.fileComment" label="备注" label-class-name="label-style" content-class-name="content-style">{{ form.fileComment }}</el-descriptions-item>

              <!-- 如果没有任何文书信息，显示提示 -->
              <el-descriptions-item v-if="!hasDocumentInfo" label="" :span="2" label-class-name="label-style" content-class-name="content-style">
                <div class="no-data-tip">暂无文书信息数据</div>
        </el-descriptions-item>
      </el-descriptions>
          </el-col>
        </el-row>

        <!-- 内容格式部分 -->
        <el-divider content-position="left">
          <div class="divider-content">
            <i class="el-icon-document-copy section-icon"></i>
            <span>内容格式</span>
          </div>
        </el-divider>

        <el-row>
          <el-col :span="24">
            <el-descriptions class="margin-top detail-descriptions" :column="2" border>
              <el-descriptions-item label="病历内容格式" label-class-name="label-style" content-class-name="content-style">{{ form.mrLinkType }}</el-descriptions-item>
              <el-descriptions-item label="病历内容格式描述" label-class-name="label-style" content-class-name="content-style">{{ form.stMrLinkType }}</el-descriptions-item>
              <el-descriptions-item label="HTML内容号" label-class-name="label-style" content-class-name="content-style">{{ form.mrContentHtml }}</el-descriptions-item>
              <el-descriptions-item label="TEXT内容号" label-class-name="label-style" content-class-name="content-style">{{ form.mrContentText }}</el-descriptions-item>
              <el-descriptions-item label="CDA内容号" label-class-name="label-style" content-class-name="content-style">{{ form.mrContentCda }}</el-descriptions-item>
              <el-descriptions-item label="PDF内容号" label-class-name="label-style" content-class-name="content-style">{{ form.mrContentPdf }}</el-descriptions-item>
              <el-descriptions-item label="病历访问地址" label-class-name="label-style" content-class-name="content-style">{{ form.mrLinkUrl }}</el-descriptions-item>
              <el-descriptions-item label="病历访问参数" label-class-name="label-style" content-class-name="content-style">{{ form.mrLinkExt }}</el-descriptions-item>
              <el-descriptions-item label="展示处理程序" label-class-name="label-style" content-class-name="content-style">{{ form.linkApp }}</el-descriptions-item>
              <el-descriptions-item label="展示处理参数" label-class-name="label-style" content-class-name="content-style">{{ form.linkPara }}</el-descriptions-item>
              <el-descriptions-item label="内容关联号1" label-class-name="label-style" content-class-name="content-style">{{ form.mrContent1 }}</el-descriptions-item>
              <el-descriptions-item label="内容关联号2" label-class-name="label-style" content-class-name="content-style">{{ form.mrContent2 }}</el-descriptions-item>
              <el-descriptions-item label="内容关联号3" label-class-name="label-style" content-class-name="content-style">{{ form.mrContent3 }}</el-descriptions-item>
              <el-descriptions-item label="内容关联号4" label-class-name="label-style" content-class-name="content-style">{{ form.mrContent4 }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- 医护人员信息 -->
        <el-divider content-position="left">
          <div class="divider-content">
            <i class="el-icon-user section-icon"></i>
            <span>医护人员信息</span>
          </div>
        </el-divider>

        <el-row>
          <el-col :span="24">
            <el-descriptions class="margin-top detail-descriptions" :column="2" border>
              <el-descriptions-item label="创建者" label-class-name="label-style" content-class-name="content-style">{{ form.creatorName }}</el-descriptions-item>
              <el-descriptions-item label="创建时间" label-class-name="label-style" content-class-name="content-style">{{ form.createTime }}</el-descriptions-item>
              <el-descriptions-item label="最后修改人" label-class-name="label-style" content-class-name="content-style">{{ form.lastModifyName }}</el-descriptions-item>
              <el-descriptions-item label="最后修改时间" label-class-name="label-style" content-class-name="content-style">{{ form.lastModifyTime }}</el-descriptions-item>
              <el-descriptions-item label="实习医生" label-class-name="label-style" content-class-name="content-style">{{ form.houseman }}</el-descriptions-item>
              <el-descriptions-item label="实习医生名称" label-class-name="label-style" content-class-name="content-style">{{ form.stHouseman }}</el-descriptions-item>
              <el-descriptions-item label="值班医生标志" label-class-name="label-style" content-class-name="content-style">{{ form.onDutyFlag }}</el-descriptions-item>
              <el-descriptions-item label="是否值班医生" label-class-name="label-style" content-class-name="content-style">{{ form.sdOnDuty }}</el-descriptions-item>
              <el-descriptions-item label="标题中的医生姓名" label-class-name="label-style" content-class-name="content-style">{{ form.topicDoctorName }}</el-descriptions-item>
              <el-descriptions-item label="上级审签医师" label-class-name="label-style" content-class-name="content-style">{{ form.parentName }}</el-descriptions-item>
              <el-descriptions-item label="上级审签时间" label-class-name="label-style" content-class-name="content-style">{{ form.parentTime }}</el-descriptions-item>
              <el-descriptions-item label="主任审签医师" label-class-name="label-style" content-class-name="content-style">{{ form.supperName }}</el-descriptions-item>
              <el-descriptions-item label="主任审签时间" label-class-name="label-style" content-class-name="content-style">{{ form.supperTime }}</el-descriptions-item>
              <el-descriptions-item label="首次签名时间" label-class-name="label-style" content-class-name="content-style">{{ form.firstSignTime }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- 系统信息 -->
        <el-divider content-position="left">
          <div class="divider-content">
            <i class="el-icon-connection section-icon"></i>
            <span>系统信息</span>
          </div>
        </el-divider>

        <el-row>
          <el-col :span="24">
            <el-descriptions class="margin-top system-descriptions" :column="2" border>
              <el-descriptions-item label="来源业务系统主键" label-class-name="label-style" content-class-name="content-style">{{ form.hisKey }}</el-descriptions-item>
              <el-descriptions-item label="住院就诊编号" label-class-name="label-style" content-class-name="content-style">{{ form.inHospSn }}</el-descriptions-item>
              <el-descriptions-item label="业务主键结构" label-class-name="label-style" content-class-name="content-style">{{ form.hisKeySrc }}</el-descriptions-item>
              <el-descriptions-item label="系统更新时间" label-class-name="label-style" content-class-name="content-style">{{ form.pdlLastUpdate }}</el-descriptions-item>
              <el-descriptions-item label="IMR主键" label-class-name="label-style" content-class-name="content-style">{{ form.imrRowkey }}</el-descriptions-item>
              <el-descriptions-item label="IHR主键" label-class-name="label-style" content-class-name="content-style">{{ form.ihrRowkey }}</el-descriptions-item>
              <el-descriptions-item label="PAV主键" label-class-name="label-style" content-class-name="content-style">{{ form.pavRowkey }}</el-descriptions-item>
              <el-descriptions-item label="PAT主键" label-class-name="label-style" content-class-name="content-style">{{ form.patRowkey }}</el-descriptions-item>
              <el-descriptions-item label="患者业务唯一号" label-class-name="label-style" content-class-name="content-style">{{ form.hisPatId }}</el-descriptions-item>
              <el-descriptions-item label="就诊业务唯一号" label-class-name="label-style" content-class-name="content-style">{{ form.hisVisId }}</el-descriptions-item>
      </el-descriptions>
          </el-col>
        </el-row>
      </div>

      <div class="action-section">
        <el-button type="primary" icon="el-icon-edit" v-if="form.fileFlag !== '1'" @click="handleEdit" class="action-button">编辑病历</el-button>
        <el-button type="info" icon="el-icon-back" @click="handleBack" class="action-button">返回列表</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getInpatientRecord } from "@/api/ai/inpatientRecord";

export default {
  name: "InpatientRecordDetail",
  data() {
    return {
      // 表单参数
      form: {},
      // 病历ID
      rowkey: null
    };
  },
  computed: {
    // 是否有文书信息数据
    hasDocumentInfo() {
      return !!(this.form.mrName || this.form.mrTopic || this.form.mrType || this.form.stMrType ||
                this.form.mrClass || this.form.mrSubClass || this.form.captionDateTime ||
                this.form.fileVisitType || this.form.photocopy || this.form.stPhotocopy ||
                this.form.deleteFlag || this.form.fileComment);
    },
    // 是否有内容格式数据
    hasContentFormat() {
      return !!(this.form.mrLinkType || this.form.stMrLinkType || this.form.mrContentHtml ||
                this.form.mrContentText || this.form.mrContentCda || this.form.mrContentPdf ||
                this.form.mrLinkUrl || this.form.mrLinkExt || this.form.linkApp ||
                this.form.linkPara || this.form.mrContent1 || this.form.mrContent2 ||
                this.form.mrContent3 || this.form.mrContent4);
    },
    // 是否有医护人员信息
    hasPersonnelInfo() {
      return !!(this.form.creatorName || this.form.createTime || this.form.lastModifyName ||
                this.form.lastModifyTime || this.form.houseman || this.form.stHouseman ||
                this.form.onDutyFlag || this.form.sdOnDuty || this.form.topicDoctorName ||
                this.form.parentName || this.form.parentTime || this.form.supperName ||
                this.form.supperTime || this.form.firstSignTime);
    },
    // 是否有系统信息
    hasSystemInfo() {
      return !!(this.form.hisKey || this.form.inHospSn || this.form.hisKeySrc ||
                this.form.pdlLastUpdate || this.form.imrRowkey || this.form.ihrRowkey ||
                this.form.pavRowkey || this.form.patRowkey || this.form.hisPatId ||
                this.form.hisVisId);
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      console.log('beforeRouteEnter 触发');
      console.log('路由参数:', to.query);
      vm.rowkey = to.query.rowkey;
      console.log('获取到的rowkey:', vm.rowkey);
      
      if (!vm.rowkey) {
        vm.$message.error('缺少必要的参数');
        vm.$router.go(-1);
        return;
      }
      
      vm.getInfo();
    });
  },
  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate 触发');
    console.log('新的路由参数:', to.query);
    this.rowkey = to.query.rowkey;
    console.log('新的rowkey:', this.rowkey);
    
    if (!this.rowkey) {
      this.$message.error('缺少必要的参数');
      this.$router.go(-1);
      return;
    }
    
    this.getInfo();
    next();
  },
  methods: {
    // 获取详情数据
    getInfo() {
      console.log('开始调用详情接口，rowkey:', this.rowkey);
      
      getInpatientRecord(this.rowkey).then(response => {
        console.log('详情接口返回:', response);
        
        // 修正条件判断：code为0表示成功
        if (response && response.code === 0) {
          this.form = response.data || {};
          console.log('设置详情数据:', this.form);
        } else {
          this.$message.error("获取详情失败：" + (response.message || '未知错误'));
        }
      }).catch(error => {
        console.error('详情接口调用异常:', error);
        this.$message.error("获取详情失败：" + error.message);
      });
    },
    /** 编辑按钮操作 */
    handleEdit() {
      this.$router.push({ path: '/ai/inpatientRecord/edit', query: { rowkey: this.rowkey }})
    },
    /** 返回按钮操作 */
    handleBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;

  .detail-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0;

      .left-section {
        display: flex;
        align-items: center;

        .header-icon {
          font-size: 22px;
          color: #409EFF;
          margin-right: 10px;
        }

        .card-title {
          font-size: 18px;
          font-weight: bold;
          color: #303133;
          margin-right: 15px;
        }

        .status-indicator {
          font-weight: bold;
          border-radius: 15px;
          padding: 5px 15px;
        }
      }

      .back-button {
        border-radius: 20px;
        padding: 9px 20px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
      }
    }

    .content-section {
      padding: 20px 0;

      .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .section-icon {
          font-size: 18px;
          color: #409EFF;
          margin-right: 8px;
        }

        span {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }
      }

      .info-descriptions, .detail-descriptions, .system-descriptions {
        margin-bottom: 30px;
        border-radius: 6px;
        overflow: hidden;

        ::v-deep .el-descriptions-item__label {
          background-color: #f5f7fa;
          font-weight: bold;
        }

        ::v-deep .el-descriptions-item__content {
          padding: 12px 15px;
        }
      }

      .id-text {
        color: #409EFF;
        font-weight: bold;
      }

      .patient-text, .visit-text, .record-text {
        color: #606266;
        font-family: 'Arial', sans-serif;
      }

      .time-text {
        color: #606266;
        font-family: 'Arial', sans-serif;
      }

      .detail-tag {
        border-radius: 20px;
        padding: 2px 12px;
        font-weight: bold;
      }

      .divider-content {
        display: flex;
        align-items: center;

        .section-icon {
          font-size: 18px;
          color: #409EFF;
          margin-right: 8px;
        }

        span {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }
      }
    }

    .action-section {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #ebeef5;

      .action-button {
        min-width: 120px;
        margin: 0 10px;
        border-radius: 20px;
        padding: 10px 25px;
        transition: all 0.3s;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }

  ::v-deep .el-divider {
    margin: 30px 0;
  }

  ::v-deep .el-divider__text {
    background-color: transparent;
  }
}
</style>


